<template>
  <div class="details">
    <!-- 顶部 -->

    <Head @handleStatus='handleTab'></Head>
    <!-- 头部 -->
    <!-- 店铺 -->
    <div v-if="status == 1">
      <div class="zs-wrapper">
        <div class="zs-bread-crumbs">
          <a @click="$router.push('/')">首页</a>><span>详情</span>
        </div>
        <div class="zs-inner clearfix">
          <div class="zs-deal-detail">
            <!-- 焦点图 -->
            <div class="zs-focus">
              <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" style="height:400px;">
                <swiper-slide v-for="pic in detailData.pic" :key='pic.pic_id' class="swiper_img">
                  <img :src="imgUrl.img+pic.image_path"></swiper-slide>
                </swiper-slide>
                <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
              </swiper>
              <!-- swiper2 Thumbs -->
              <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" style="height:50px;">
                <swiper-slide v-for="pic in detailData.pic" :key='pic.pic_id' class="slide-1">
                  <img :src="imgUrl.img+pic.image_path" width='50' height='50'></swiper-slide>
                </swiper-slide>
              </swiper>
            </div>
            <div class="zs-deal-wrap">
              <!-- 商品标题 -->
              <h3 class="zs-commodity-title">
                {{detailData.goods_name}} </h3>
              <div class="zs-price-panel">
                <dl class="zs-sale-price">
                  <dt id="zs-price">价&nbsp;&nbsp;&nbsp;格：</dt>
                  <dd class="clearfix" v-if="pprice" key="havepprice">
                    <span class="zs-price">¥<em id="zp-goods-price">{{this.mortotal}}</em></span>
                  </dd>
                  <dd v-else key="nohavepprice">
                    <span class="zs-price">¥<em id="zp-goods-price">{{total}}</em></span>
                  </dd>
                </dl>
              </div>
              <!-- 交易区块 -->
              <div class="zs-detail-infor">
                <dl class="zs-evaluate">
                  <dt>评&nbsp;&nbsp;&nbsp;价：</dt>
                  <dd>
                    <a id="a-buy-review">购买评价&nbsp;<em>0</em></a><span class="line">|</span>
                    <a id="a-buy-record">成交记录&nbsp;<em>1</em></a>
                  </dd>
                </dl>
                <dl class="zs-service-bar" style="z-index:1;">
                  <dt>服务保障：</dt>
                  <dd class="clearfix">由&nbsp;<span style="color:#ff0000;"><a href="javascript:;" target="_blank" class="link"
                        id="zs_shop_url">{{detailData&&detailData.seller&&detailData.seller.seller_name}}</a></span>
                    &nbsp; 发货并承诺提供以下服务保障</dd>
                  <dd>
                    <ul class="clearfix">
                      <li>
                        <a href="javascript:;" target="_blank"><i class="iconfont"></i>正品保障</a>
                      </li>
                      <li>
                        <a href="javascript:;" target="_blank"><i class="iconfont"></i>无忧退换</a>
                      </li>
                    </ul>
                  </dd>
                </dl>
                <div class="zs-skin-inner">
                  <div class="zs-hd">选择您要的商品信息</div>
                  <!-- 版本选择 -->
                  <!-- 颜色类别 -->
                  <!-- 套装 -->
                  <dl class="zs-suit" style="padding:0" v-for="(item,index) in handleCData" :key="index">
                    <dt>{{item.stock_last_name}}：</dt>
                    <dd>
                      <ul class="zs-options clearfix" id="zp-choose-suit">
                        <li v-for='(list,listInde) in item.val' :key='listInde' @click='handelSelect(list, item.stock_last_name_id)'
                          :class="isActive(list) ? 'cur' : '' ">
                          <span class="can-buy">{{list}}<i></i></span>
                        </li>
                      </ul>
                    </dd>
                  </dl>
                  <div style="    margin-top: 20px;">
                    <!-- 购买数量 -->
                    <dl class="zs-quantity">
                      <dt>购买数量：</dt>
                      <dd class="clearfix">
                        <div class="amount-widget">
                          <span class="zs-decrease " @click="minus()">-</span>
                          <input name="zp-goods-number" title="请输入购买量" v-model="shopnum" disabled type="number" class="zs-goods-number"
                            id="zp-goods-number" fn="zp-goods-number">
                          <span class="zs-increase" @click="add()">+</span>
                        </div>
                        <div class="zs-part">件<em class="zs-goods-number-show1">（限购{{Selected.stock_number || 0}}件）</em></div>
                      </dd>
                    </dl>
                    <!-- 立即购买 -->
                    <div class="zs-deal-btn clearfix">
                      <a style="cursor:pointer;" title="立即购买" class="zs-buy-now" id="buynow" :class="falsg ? 'payBtnRed': 'payccc'"
                        @click='handleBuy'>立即购买</a>
                      <a href="javascript:void(0)" class="zs-store-buy" title="加入购物车">加入购物车</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="zs-store-infor">
            <!-- 商家特殊处理 -->
            <div class="zs-store-name">
              <h3>
                <a href="javascript:;">{{detailData&&detailData.seller&&detailData.seller.seller_name}}</a>
              </h3>
            </div>
            <div class="zs-modbox">
              <div class="zs-modbox-hd">在线客服：</div>
              <ul class="zs-custom-service">
                <li>
                  <a href="javascript:;">
                    <img border="0" title="点击这里给我发消息" alt="点击这里给我发消息" src="http://wpa.qq.com/pa?p=2:2899257411:52">
                  </a>
                  <span>和我联系</span>
                </li>
              </ul>
            </div>
            <div class="zs-modbox">
              <ul class="zs-contact-way">
                <li><span class="zs-label">客服电话：</span>
                  <p>400-180-2011</p>
                </li>
              </ul>
            </div>
            <div class="zs-modbox">
              <ul class="zs-contact-way">
                <li><span class="zs-label">接待时间：</span>
                  <p>9:00-19:00</p>
                </li>
              </ul>
            </div>
            <div class="zs-modbox">
              <ul class="zs-contact-way">
                <li><span class="zs-label">店铺30天退款率：</span>
                  <p style="margin-left: 40px;">0.00%</p>
                </li>
              </ul>
            </div>
            <div class="zs-modbox">
              <ul class="zs-store-score">
                <li>描述:<em class="flat">5.0</em>
                  <span class="flat">持平</span>
                  同行
                  0.00%
                </li>
                <li>描述:<em class="flat">5.0</em>
                  <span class="flat">持平</span>
                  同行
                  0.00%
                </li>
                <li>描述:<em class="flat">5.0</em>
                  <span class="flat">持平</span>
                  同行
                  0.00%
                </li>
              </ul>
            </div>
            <div class="zs-collect-box">
              <a href="javascript:;" target="_blank" class="zs-btn" @click="handleInfo">进入店铺</a>
              <a href="javascript:void(0)" class="zs-btn" @click="handleInfo">关注店铺</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺优惠 -->
      <div class="wrapper clearfix">
        <div class="zs-side" id="zs-side-left">
          <!--  搜索店内商品 -->
          <div class="zs-modbox" id="moveTop">
            <div class="zs-modbox-hd">搜索店内商品</div>
            <div class="searchgoods">
              <dl>
                <dt>商品名：</dt>
                <dd><input type="text" value="" class="text" maxlength="255" name="keyword"></dd>
              </dl>
              <dl class="searchprice">
                <dt>价&nbsp;格：</dt>
                <dd>
                  <input type="text" class="text" name="minPrice" value="" maxlength="6">
                  <span>到</span>
                  <input type="text" class="text" maxlength="6" value="" name="maxPrice">
                </dd>
              </dl>
              <input type="submit" value="搜索" class="goodsbtn" id="leftSearchSubmit" name="">
            </div>
          </div>
          <!-- 商品分类 -->
          <div class="zs-modbox">
            <h2 class="zs-modbox-hd">商品分类</h2>
            <div class="goods-category" id="goods-category-list">
              <dl class="all-goods">
                <dt id="zs-all-goods">
                  <a href="javascript:;" target="_blank" class="manu-url" style="color:#333;text-decoration:none;cursor:pointer;">查看全部商品</a>
                </dt>
                <dd>
                  <a target="_blank" href="javascript:;">按关注</a>
                  <a target="_blank" href="javascript:;">按价格</a>
                  <a target="_blank" href="javascript:;">按时间</a>
                </dd>
              </dl>
              <dl class="unfold zp-goods-category">
                <dt>
                  <h3>智能手表</h3>
                </dt>
                <dd>
                  <ul @click="handleClick($event)">
                    <li v-for="(item,index) in hotlist" :key="index" :data-index="index" style="cursor: pointer;">{{item.name}}</li>
                  </ul>
                </dd>
              </dl>
            </div>
          </div>
          <!-- 排行榜切换 -->
          <div class="zs-modbox" id="sell-hot-goods">
            <div class="zs-modbox-hd">宝贝排行榜</div>
            <ul class="side-tab clearfix zs-rankingtab ">
              <li class="current" fn="1" @click="Sellwelll()">热销TOP5</li>
              <li class="" fn="2" @click="Sellwell()">人气TOP5</li>
            </ul>
            <ul class="ranking-list" id="sell-goods">
              <li v-for="(item,index) in shopData" :key="index" @click="detaii(item.goods_id)">
                <a href="javascript:;" target="_blank" class="pic" :title="item.goods_short_title">
                  <img border="0" :src="imgUrl.img+item.goods_pic">
                </a>
                <div class="title">
                  <a target="_blank" href="javascript:;" title="斐讯K2 1200M千兆家用双频">{{item.goods_short_title}}</a>
                </div>
                <span class="price">¥{{item.goods_present_price}}</span>
                <span class="sale-number">已售出<em>{{item.goods_id}}</em>笔</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 详情 -->
        <div class="zs-main">
          <div class="zs-tabbar zs-tabbar-nav clearfix" style="width: 990px;">
            <ul class="clearfix">
              <li class="cur" @click="dianjicxq()">
                <a href="javascript:void(0)">商品详情</a>
              </li>
              <li @click="dianjicluo()">
                <a href="javascript:void(0)">服务承诺</a>
              </li>
              <li>
                <div class="phone-purchase">
                  <a href="javascript:;">手机购买<i class="ico"></i></a>
                  <div class="code deofr">
                    <img src="../image/shop.png" width="91" height="91">
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <!-- 详情 -->
          <div class="zs-container" v-show="tabs">
            <!-- 商品详情 -->
            <div class="zs-goods-detail">
              <ul class="zs-attributes-list">
                <li><span>官方标配：</span>{{getSelected() || 0}}</li>
              </ul>
              <div class="sevice-title" id="pro-show">
                <span class="title">商品介绍</span>
                <span class="english-title">Products</span>
              </div>
              <div class="service-content">
                <div class="zs-goods-content" v-html="detailData.goods_content"></div>
              </div>
            </div>
            <!-- 购买评价开始 -->
            <div class="zs-comment-mod">
              <div class="zs-comment-filter clearfix">
                <span class="cur" value="4"><input type="radio" value="4" name="order-review" checked="checked">全部评价
                  (0)</span>
                <span><input type="radio" value="5" name="order-review">晒图 (0)</span>
                <span><input type="radio" value="1" name="order-review">好评 (0)</span>
                <span><input type="radio" value="2" name="order-review">中评 (0)</span>
                <span><input type="radio" value="3" name="order-review">差评 (0)</span>
              </div>
            </div>
            <!-- 交易记录开始 -->
            <div class="zs-purchase-record">
              <div class="detail-head">
                <div class="title">
                  <h4>累计成交记录(1)</h4>
                </div>
                <div class="detail-head-filter clearfix">
                  <div class="checks">
                    <label for=""><input type="radio">近30天成交记录(0件)</label>
                    <label class="cur" for=""><input type="radio" checked="">累计成交记录(1件)</label>
                  </div>
                </div>
              </div>
              <div>
                <table>
                  <tbody>
                    <tr>
                      <th class="zs-cell-buyer">买家</th>
                      <th class="zs-cell-sku">款式和型号</th>
                      <th class="zs-cell-price" style="display: none;">价格</th>
                      <th class="zs-cell-amount">数量</th>
                      <th class="zs-cell-time">成交时间</th>
                    </tr>
                    <tr>
                      <td class="zs-cell-buyer">gl***dc</td>
                      <td class="zs-cell-type">
                        <p>【特价包邮】台能 高清纳米防爆膜保护膜 防刮花 所有热销品牌均有货</p>
                        <p>官方标配：白色</p>
                      </td>
                      <td class="zs-cell-amount">1</td>
                      <td class="zs-cell-time">2018-05-13 00:19成交 </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- 用户留言开始 -->
            <div class="zs-message-mod">
              <div class="detail-head">
                <div class="title">
                  <h4 id="messageNumTitle">购买咨询(0)</h4>
                </div>
                <div class="detail-head-filter clearfix">
                  <div class="checks">
                    <label class="cur" for=""><input type="radio" checked="" value="10" name="wordsKey">全部咨询</label>
                    <label for=""><input type="radio" value="1" name="wordsKey">商品咨询</label>
                    <label for=""><input type="radio" value="2" name="wordsKey">库存与配送</label>
                    <label for=""><input type="radio" value="3" name="wordsKey">支付问题</label>
                    <label for=""><input type="radio" value="4" name="wordsKey">发票与保修</label>
                    <label for=""><input type="radio" value="5" name="wordsKey">促销及赠品</label>
                    <label for=""><input type="radio" value="6" name="wordsKey">其他</label>
                  </div>
                  <a href="javascript:volid(0);" class="ask-link">我要咨询</a>
                </div>
              </div>
              <ul class="ask-list" id="zp-message-list">
                <div class="zs-no-comment-prompt">暂无咨询记录，有问题可以在下面留言给商家</div>
              </ul>
              <div class="zs-enter-message" id="zp-enter-message">
                <div class="detail-head">
                  <div class="title">
                    <h4>发表咨询</h4><span class="close"></span>
                  </div>
                  <div class="detail-head-filter clearfix">
                    <div class="checks">
                      <label class="cur" for=""><input type="radio" value="1" name="saveWordsKey" checked="">商品咨询</label>
                      <label for=""><input value="2" name="saveWordsKey" type="radio">库存与配送</label>
                      <label for=""><input value="3" name="saveWordsKey" type="radio">支付问题</label>
                      <label for=""><input value="4" name="saveWordsKey" type="radio">发票及保修</label>
                      <label for=""><input value="5" name="saveWordsKey" type="radio">促销及赠品</label>
                      <label for=""><input value="6" name="saveWordsKey" type="radio">其它</label>
                    </div>
                  </div>
                </div>
                <div class="zs-messagebox">
                  <textarea name="zs-goods-message-content" id="zp-goods-message-content"></textarea>
                  <div class="zs-question-foot clearfix" id="message-button">
                    <label><input name="zp-goods-message-show" type="checkbox" value="1">仅商家可见</label>
                    <span id="submit-content">（选择后，您的留言只有商家可以看到，建议您在询问价格等隐私信息时选择）</span><span class="zs-nopublish-btn">发表留言</span>
                    <span class="zs-number" id="limtset"><em>0</em>/200</span>
                    <a href="javascript:void(0)" class="zs-publish-btn">发表留言</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 服务承诺 -->
          <Ensure v-show="tabss"></Ensure>
        </div>
      </div>

      <!-- 建议置顶 -->
      <!-- 侧边栏 -->
      <div class="zc-side-toolbar-box">
        <div class="zc-operation-tabbox">
          <!-- 足迹 -->
          <div class="zc-tab-footprint" data-tips="我的足迹" data-role="BrowseHistroy">
            <!--  zc-tab-hover -->
            <div class="zc-tab-ico"></div>
          </div>
          <!-- 购物车 -->
          <div class="zc-tab-cart" data-tips="购物车" data-role="ShopCart">
            <!--  zc-tab-hover -->
            <div class="zc-tab-ico"></div>
            <span class="zc-number" id="cart-total">0</span>
          </div>
          <!-- 优惠券 -->
          <div class="zc-tab-coupons" data-tips="优惠券" data-role="UserCoupon">
            <!--  zc-tab-hover -->
            <div class="xhd"></div>
            <div class="zc-tab-ico"></div>
          </div>
        </div>
        <div class="zc-toolbar-tool">
          <a href="#" class="zc-backtop"></a>
        </div>
      </div>
    </div>
    <div class="comm" v-if="status == 2">
      正在完善中
    </div>
    <!-- 底部 -->
    <div class="footer">
      <foot></foot>

    </div>
  </div>
</template>

<script>
  import foot from "@/components/footer";
  import * as API from "@/api/index";
  import Head from "@/pages/index/header";
  import Ensure from "@/components/ensure";
  export default {
    name: "detail",
    data() {
      return {
        swiperOptionTop: {
          spaceBetween: 10,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        },
        swiperOptionThumbs: {
          spaceBetween: 10,
          slidesPerView: 4,
          touchRatio: 0.2,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          slideToClickedSlide: true
        },
        id: this.$route.query.id ? this.$route.query.id : 48,
        detailData: {},
        handleCData: [], // 规格
        stockObj: {},
        Selected: {}, // 已选。库存，价格
        Stock: 0, // 库存
        shopnum: 1,
        falsg: false, // 有库存的时候，立即购买和加入购物车成高亮显示
        tabs: true,
        tabss: false,
        shopData: [],
        page: 1,
        page_number: 10,
        paixu: 1,
        pprice: true,
        total: "",
        mortotal: "",
        status: 1,
        hotlist: [{
            name: '喜书郎'
          },
          {
            name: '360'
          },
          {
            name: '荣耀'
          },
          {
            name: '小米'
          },
          {
            name: '乐视'
          },
          {
            name: '华为'
          },
          {
            name: 'Apple（苹果）'
          },
          {
            name: 'Samsung（三星）'
          }
        ]
      };
    },
    created() {
      this.getData(), this.handleC();
      document.documentElement.scrollTop = 0;
      this.getshopList();
    },
    components: {
      Head,
      foot,
      Ensure
    },

    mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper;
        const swiperThumbs = this.$refs.swiperThumbs.swiper;
        swiperTop.controller.control = swiperThumbs;
        swiperThumbs.controller.control = swiperTop;
      });
    },
    methods: {
      //委托
      handleClick(e) {
        if (e.target.nodeName.toLowerCase() === 'li') {
          this.$message({
          message: '正在完善中....',
          type: 'warning'
        });
        }
      },

      //获取商品列表获取商品列表信息
      async getshopList() {
        const data = {
          service: "Pro.Goods.GoodsList",
          goods_type: 1,
          page: this.page,
          page_number: this.page_number,
          order: this.paixu
        };
        const res = await API.toIndex(data);
        if (res.ret == 200) {
          this.shopData = res.data.lists.slice(0, 5);
        }
      },
      async getData() {
        const data = {
          service: "Pro.Goods.GoodsDetail",
          goods_type: 1,
          goods_id: this.id
        };
        const res = await API.toIndex(data);
        if (res.ret == 200) {
          this.detailData = res.data;
          this.mortotal =
            this.detailData &&
            this.detailData.stock &&
            this.detailData.stock.stock_price + this.detailData &&
            this.detailData.stock &&
            this.detailData.stock.stock_price_q;
        }
      },
      // 获取规格
      async handleC() {
        const data = {
          service: "Pro.Goods.GoodsStock",
          goods_type: 1,
          goods_id: this.id
        };
        const res = await API.toIndex(data);
        if (res.ret === 200) {
          this.handleCData = res.data;
          // 双重循环是因为在规格这里的时候，要自动选择一个规格，一进来就要显示库存和价格
          this.handleCData.forEach(list => {
            list.val.forEach(val => {
              this.handelSelect(val, list.stock_last_name_id, list.val);
            });
          });
        } else {
          console.log(res.msg);
        }
      },
      // 获取规格对应商品的价格
      async handelSelect(name, stock_last_name_id) {
        this.$set(this.stockObj, stock_last_name_id, name);
        const data = {
          service: "Pro.Goods.GoodsPrice",
          goods_type: 1,
          goods_id: this.id,
          stock_name: this.getSelected()
        };
        const res = await API.toIndex(data);
        if (res.ret === 200) {
          this.Selected = res.data;
          this.total = this.Selected.stock_price + this.Selected.stock_price_q;
          if (
            this.Selected.stock_number == 0 ||
            this.Selected.stock_number == "0"
          ) {
            this.falsg = false;
          } else {
            this.pprice = false;
            this.falsg = true;
          }
          this.Stock = res.data.stock_number; // 库存
        } else {
          console.log(res.msg);
        }
      },
      handleInfo() {
          this.$notify({
              title: '提示信息',
              message: '正在完善此功能',
              type: 'info'
            });
      },
      // 根据this.stockObj，显示选择的颜色或者型号
      getSelected() {
        if (JSON.stringify(this.stockObj) != "{}") {
          let str = "";
          for (const i in this.stockObj) {
            str += `${this.stockObj[i]},`;
          }
          str = str.substr(0, str.length - 1);
          return str;
        }
        return "";
      },
      // 判断是否选中，给颜色
      isActive(list) {
        if (this.getSelected().indexOf(list) > -1) {
          return true;
        }
        return false;
      },
      // 减少数量
      minus() {
        this.shopnum > 2 ? this.shopnum-- : (this.shopnum = 1);
      },
      add() {
        parseInt(this.shopnum, 10) >= parseInt(this.Stock, 10) ?
          this.$message({
            message: "不能再添加了",
            type: "warning"
          }) :
          this.shopnum++;
      },
      //立即购买
      async handleBuy() {
        const StockVal = (await this.Stock) != 0;
        const flasee = (await this.falsg) !== false;
        this.getdeTailFreight();
        let len = {};
        len = this.detailData;
        len.shopping_number = this.shopnum;
        len.goods_type = 1;
        len.Selected = this.Selected;
        len.stock_name = this.getSelected();
        if (StockVal && flasee) {
          localStorage.setItem("dataList", JSON.stringify(len));
          StockVal && this.$router.push("/balance");
        } else {
          this.$message("请选择正确商品");
        }
      },
      //获取商品运费
      async getdeTailFreight() {
        const data = {
          service: "Pro.Order.GetFreight",
          goods_id: this.id,
          goods_type: 1,
          stock_name: this.getSelected(),
          goods_num: this.shopnum
        };
        const res = await API.toIndex(data);
        if (res.ret == 200) {
          this.$store.commit("GOODFERIGHR", res.data);
        }
      },
      dianjicluo() {
        this.tabs = false;
        this.tabss = true;
      },
      dianjicxq() {
        this.tabs = true;
        this.tabss = false;
      },
      //热销
      Sellwell() {
        this.shopData = [];
        this.paixu = 3;
        this.getshopList();
      },
      Sellwelll() {
        this.shopData = [];
        this.paixu = 2;
        this.getshopList();
      },
      handleTab(num) {
        this.status = num;
      },
      detaii(id) {
        this.$router.push({
          path: '/details',
          query: {
            id
          }
        })
        location.reload()
      }
    }
  };

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../scss/details.css";

  .comm {
    height: calc(100vh - 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

</style>